<template>
    <div>
        <div v-if="!repeat">
            <v-title :title="title">
                <p class="date" @click="$router.push(tableData.expand.path)">{{rightBtn}}
                    <i class="iconfont icon-chakangengduo"></i>
                </p>
            </v-title>
            <v-plain-table :data="tableData" :operation="operation" :pagination="false">
                <template slot="expand" slot-scope="{scope}">
                    <el-button type="text" @click="showBillDetail(scope.row)">详情</el-button>
                </template>
            </v-plain-table>
            <v-plain-dialog
                    title="票据详情"
                    width="60%"
                    ref="detail">
                <v-bill-detail :bill="currentBillDetail"/>
            </v-plain-dialog>
        </div>
        <div v-if="repeat">
            <div
              class="pd-10"
              v-for="item in tableData"
              :key="item.expand.path">
                <div class="top">
                <span>{{item.expand.title}} <i class="iconfont icon-paihang"></i> </span>
                <em @click="$router.push(item.expand.path)">查看排行榜 <i class="iconfont icon-chakangengduo"></i> </em>
                </div>
                <v-plain-table
                        :operation="false"
                        :pagination="false"
                        :data="item"/>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
  import { Component, Vue, Prop } from 'vue-property-decorator'
  import vPlainTable from '@/components/plain-table'
  import vPlainDialog from '@/components/plain-dialog'
  import vBillDetail from '@/components/bill-detail'
  import vTitle from '../home-title'

  @Component({
    components: {
      vPlainTable, vPlainDialog, vBillDetail,vTitle
    }
  })
  export default class Order extends Vue {
    @Prop(String) title!: string
    @Prop(String) rightBtn!: string
    @Prop() tableData
    @Prop({
      default: true
    }) operation: boolean
    @Prop({
      default: false
    }) repeat: boolean
    currentBillDetail = {}

    async showBillDetail ({billId}) {
      let res: AjaxResponse = await  this.$axios.get(`b/boms/bill/${billId}`)
      if (res.responseCode === 200) {
        this.currentBillDetail = res.data
        this.$refs.detail.openDialog()
      }
    }
  }
</script>
<style lang="less">
    .date {
        color: #999;
        font-size: 14px;
        cursor: pointer;
    }
    
</style>
<style scoped lang="less">
    .pd-10{
        margin-top: 10px;
    }
  .top {
      line-height: 28px;
      display: flex;
      justify-content: space-between;
      span {
        color: #4E93FF;
        font-size: 20px;
        border-bottom: 1px solid #4e93ff;
      }
      em {
        font-size: 14px;
        color: #999;
        cursor: pointer;
      }
    }
</style>

